<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>天气案例_监视属性实现</title>
</head>
<script type="text/javascript" src="../js/vue.js"></script>
    <body>
        <!-- 
            监视属性watch：
                1.当被监视的属性发生变化时，回调函数自动调用（handler），进行相关操作；
                2.监视的属性必须存在，才能进行监视！！
                3.监视的两种写法：
                    （1）new Vue时编写watch配置项；
                    （2）通过vm.$watch('属性名',{配置项})进行监视；
         -->
        <!-- 准备一个容器 -->
        <div id="root">
            <h2>今天天气很{{info}}</h2>
            <button @click="changeWeather">切换天气</button>
        </div>

        <script type="text/javascript">
            Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示。
            
            const vm = new Vue({
                el:'#root',
                data:{
                    isHot:true
                },
                computed:{
                    info(){
                        return this.isHot ? '炎热' : '凉爽';
                    }
                },
                methods:{
                    changeWeather(){
                        this.isHot = !this.isHot;
                    }
                },
                //监视属性，可以监听vm中存在的属性（包括计算属性）
                /* watch:{
                    isHot:{
                        immediate:true, //初始化时让handler调用一下
                        //handler什么时候被调用？当isHot发生改变时
                        handler(newValue,oldValue){ //handler有两个参数分别是：新的值（newValue） 和 旧的值（oldValue）
                            console.log('info属性被修改了'+newValue,oldValue);
                        }
                    }  
                } */
            })

            vm.$watch('isHot',{
                immediate:true, //初始化时让handler调用一下
                //handler什么时候被调用？当isHot发生改变时
                handler(newValue,oldValue){ //handler有两个参数分别是：新的值（newValue） 和 旧的值（oldValue）
                    console.log('info属性被修改了'+newValue,oldValue);
                }
            });

        </script>
        
    </body>
</html>